<template>
  <div class="payment_result">
    <el-dialog :show-close="false" :visible.sync="dialogVisible" width="370px">
      <div class="acea-row row-column row-middle">
        <div class="pic"><img
            :src="pay_status === 'success' ? require('../../assets/images/paysuccessful.png') : require('../../assets/images/payFailed.png')">
        </div>
        <div class="status font-color">{{ pay_status === 'success' ?
          $t(`page.orderPayStatus.success`) : $t(`page.orderPayStatus.fail`) }}</div>
        <div class="tips">{{ pay_status === 'success' ? $t('tishi') : errorMsg }}</div>
        <el-button type="primary" @click="confirm">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
    <setStorageDialogVue ref="setStorageDialogVue" @closeFunc="goList" @getList="goList" />
  </div>
</template>

<script>
import QS from 'qs'
import setStorageDialogVue from '@/pages/users/setStorageDialog.vue';
export default {
  name: "order_sure",
  components: {
    setStorageDialogVue
  },
  data() {
    return {
      dialogVisible: true
    }
  },
  async asyncData({ app, query }) {
    return {
      // success  fail
      pay_status: query.pay_status,
      //  支付订单号
      trade_no: query.trade_no,
      //  支付渠道
      pay_type: query.pay_type,
      errorMsg: ''
    }
  },
  mounted() {
    // 支付失败 查找失败原因
    if (this.pay_status === 'fail') {
      this.payErrorInfo()
    }

  },
  methods: {
    payErrorInfo() {
      this.$axios({
        method: 'post',
        url: '/api/front/pay_error_info',
        data:  QS.stringify({
          pay_type: this.pay_type,
          trade_no: this.trade_no
        }),
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
      }).then(res => {
        this.errorMsg = res.data
      });
    },
    goList() {
      if (this.pay_status === 'success') {
        this.$router.push({ path: `/users/order_list?orderStatus=1&trade_no=${this.trade_no}` });
      } else {
        this.$router.push({ path: '/users/order_list?orderStatus=0' });
      }
    },
    confirm() {
      if(this.trade_no && this.$auth.user.isSyn){
        this.$refs.setStorageDialogVue.show([this.trade_no])
      } else {
        this.goList()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.payment_result {
  ::v-deep.el-dialog__header {
    padding: 0;
  }

  ::v-deep.el-dialog__body {
    padding: 49px 0 43px 0;
  }

  .status {
    font-size: 20px;
    font-family: Arial-BoldMT, Arial;
    font-weight: bold;
  }

  .tips {
    font-size: 16px;
    font-family: ArialMT;
    color: #999999;
    margin: 24px 0;
  }
}

.pic {
  width: 165px;
  height: 165px;
  margin-bottom: 30px;

  img {
    width: 100%;
    height: 100%;
  }
}</style>
